<template>
  <section id="login" class="app flex-row align-items-center">
    <div class="container">
      <div class="row justify-content-center">
        <div class="card-group mb-0">
          <div class="card p-4">
            <div class="card-block">
              <h1>Login</h1>
              <p class="text-muted">Sign In to your account</p>
              <div class="input-group mb-3">
                <span class="input-group-addon"><i class="icon-user"></i></span>
                <input type="text" class="form-control" placeholder="Username" v-model="username">
              </div>
              <div class="input-group mb-4">
                <span class="input-group-addon"><i class="icon-lock"></i></span>
                <input id="_login-pwd" type="password" v-model="password" class="form-control" placeholder="Password">
                <div id="login-pwd" class="btn btn-secondary active"><i :class="icon"></i></div>
              </div>
              <div class="input-group mb-4">
                <span class="input-group-addon"><i class="icon-screen-smartphone"></i></span>
                <input type="text" class="form-control" placeholder="短信码" v-model="security">
              </div>
  
              <div class="row">
                <div class="col-6">
                  <button type="button" class="btn btn-primary px-4" @click="login">Login</button>
                </div>
                <div class="col-6 text-right">
                  <button type="button" class="btn btn-link px-0">Forgot password?</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>

import md5 from 'md5'
import API from 'Config/api'
import { post } from 'Utils/functions'

const va = {
  c: 'icon-close',
  e: 'icon-eye',
  p: 'password',
  t: 'text'
}
export default {
  name: 'login',
  data: () => {
    return {
      icon: va.c,
      type: va.p,
      username: 'jiam',
      password: 'q12345t',
      security: '123'
    }
  },
  methods: {
    login() {
      let data = {
        username: this.username,
        pwd: md5(this.password),
        oneCode: this.security,
      }
      post({
        url: API.login,
        data: data
      }, data => {
        data.code === 0 && this.auth()
      })
    },
    auth() {
      post({
        url: API.auth,
      }, data => {
        console.log(data)
      })
    }
  },
  mounted: function () {
    let pwd = document.getElementById('login-pwd')
    let _pwd = document.getElementById('_login-pwd')
    pwd.onmousedown = () => {
      this.icon = va.e
      _pwd.setAttribute('type', va.t)
    }
    pwd.onmouseup = () => {
      this.icon = va.c
      _pwd.setAttribute('type', va.p)
    }
  }
}
</script>

<style lang="scss">
.container {
  margin-top: -20vh;
}

.btn.btn-secondary.active {
  border-radius: 0;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>